
<template>
  <div class="foot-box">
    <div class="foot-cont">
      <!-- 左侧container -->
      <div class="left-area">
        <div class="title m20">
          获取你的<span class="color">专属</span> <br /><span>活动推荐</span>
        </div>
        <p class="area">北美</p>
        <div class="bottom">
          <div class="item" v-for="(item, i) in itemList" :key="item.name + i">
            <p style="margin-bottom: 15px; font-size: 15px; font-weight: 600">
              {{ item.name }}
            </p>
            <img style="margin-bottom: 27px" :src="item.link" alt="" />
          </div>
        </div>
        <div class="footer mt20">
          <div class="item" v-for="(item, i) in list" :key="item.name + i">
            <img :src="item.link" alt="" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
      <!-- 右侧container -->
      <div class="right-area">
        <div class="top-cont">
          <el-input v-model="input" placeholder="Your email addresss">
            <template>
              <i slot="suffix" class="el-icon-edit-outline"></i>
            </template>
          </el-input>
        </div>
        <div class="bot-cont">
          <div class="wrapper">
            <div class="item">
              <div>吃喝玩乐</div>
              <div>求职签证</div>
              <div>校园活动</div>
              <div>线上课程</div>
            </div>

            <div class="item">
              <div>主编推荐</div>
              <div>本周活动推荐</div>
              <div>关于我们</div>
              <div>Blog</div>
            </div>

            <div class="item">
              <div>登入</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "z-footer",
  data () {
    return {
      itemList: [
        {
          link: require("@/assets/imgs/index/code_1.png"),
          name: "微信公众号"
        },
        {
          link: require("@/assets/imgs/index/code_2.png"),
          name: "推广合作"
        }
      ],
      list: [
        {
          link: require("@/assets/imgs/index/code_1.png"),
          name: "Private"
        },
        {
          link: require("@/assets/imgs/index/code_2.png"),
          name: "Private"
        },
        {
          link: require("@/assets/imgs/index/code_1.png"),
          name: "Private"
        },
        {
          link: require("@/assets/imgs/index/code_2.png"),
          name: "Private"
        }
      ],
      input: ""
    }
  },
  created () { },
  methods: {}
}
</script>
<style scoped lang="scss">
.foot-box {
  padding: $page_padding;
  background: $bg_footer;
  color: $text_white;
  .foot-cont {
    display: flex;
    justify-content: space-between;
    width: $main_width;
    margin: 0 auto;
    height: 600px;
    .left-area {
      .title {
        margin-left: 0;
        font-size: 60px;
        .color {
          color: $main_color;
        }
      }
      .area {
        margin: 41px 0px 55px 0px;
        font-size: 30px;
        font-weight: 600;
      }
      .bottom {
        display: flex;
        & > div {
          margin-right: 18px;
        }
        img {
          width: 120px;
          height: 120px;
        }
      }
      .footer {
        display: flex;
        .item {
          margin-right: 8px;
          cursor: pointer;
          p {
            font-size: 14px;
          }
          img {
            width: 30px;
            height: 30px;
          }
        }
      }
    }
    .right-area {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .top-cont {
        margin: 50px 50px 0 0;
      }
      .bot-cont {
        padding-right: 50px;
        .wrapper {
          display: flex;
          justify-content: space-between;
          font-size: 18px;
          font-weight: 700;
          .item {
            div {
              margin-top: 10px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
.el-input {
  ::v-deep .el-input__inner {
    width: 500px;
    height: 80px;
    background-color: $bg_footer;
    border: 3px solid white;
    color: $text_white;
    font-size: 32px;
  }
  ::v-deep .el-input__suffix {
    line-height: 80px;
    color: $text_white;
    font-size: 38px;
  }
}

::v-deep input::-webkit-input-placeholder {
  color: $text_white;
  font-size: 30px;
}
::v-deep input::-moz-input-placeholder {
  color: $text_white;
  font-size: 30px;
}
::v-deep input::-ms-input-placeholder {
  color: $text_white;
  font-size: 30px;
}
</style>
